<main-layout [sliderWidth]="sliderWidth" (toggle)="this.toggleCollapsed($event)">
  <main-slider>
    <div style="height:100%;">
      <ul nz-menu [nzMode]="'inline'" [nzTheme]="'light'" [nzInlineCollapsed]="isCollapsed" style="height:100%;"
          [style.overflow-y]="isCollapsed?'':'auto'" [style.overflow-x]="isCollapsed?'':'hidden'">
        <li style="padding-left:24px;" nzSelected="true" nz-menu-item (click)="changeJobType(0)"><i
          class="iconfont icon-quanbudingdan1"></i><span class="nav-text">全部通知</span></li>
        <li style="padding-left:24px;" nz-menu-item (click)="changeJobType(1)"><i
          class="icon iconfont icon-daifukuan"></i><span class="nav-text">运行中通知</span></li>
        <li style="padding-left:24px;" nz-menu-item (click)="changeJobType(2)"><i
          class="icon iconfont icon-daifahuo"></i><span class="nav-text">已结束通知</span></li>
        <li style="padding-left:24px;" nz-menu-item (click)="changeJobType(3)"><i
          class="icon iconfont icon-daifahuo"></i><span class="nav-text">已失败通知</span></li>
      </ul>
    </div>
  </main-slider>
  <main-content>
    <div style="background: #fff; height:100%;min-width: 700px;">
      <div class="search-line">
        <div class="search-condition-item">
          <span class="condition-name">模板ID/标题:</span>
          <nz-input [nzSize]="'large'"
                    [(ngModel)]="order_no"
                    [nzPlaceHolder]="'请输入'"></nz-input>
        </div>
        <div class="search-condition-item" style="width:300px">
          <span class="condition-name">创建时间:</span>
          <nz-datepicker
            style="width: 60%;"
            [nzSize]="'large'"
            (ngModelChange)="_createdDate=$event;_createdValueChange()"
            [ngModel]="_createdDate"
            [nzShowTime]="false"
            [nzFormat]="'YYYY-MM-DD'"
            [nzPlaceHolder]="'选择日期'">
          </nz-datepicker>
        </div>
        <div class="operate-area">
          <button nz-button [nzType]="'primary'" (click)="search()">
            <span>查 询</span>
          </button>
          <button nz-button [nzType]="'default'" (click)="reset()">
            <span>重 置</span>
          </button>
          <span class="operate" *ngIf="!searchOpen" (click)="searchOpen = !searchOpen"><span>展开</span><i
            class="anticon anticon-down"></i></span>
          <span class="operate" *ngIf="searchOpen" (click)="searchOpen = !searchOpen"><span>收起</span><i
            class="anticon anticon-up"></i></span>
        </div>
        <br>

        <div class="search-condition-item" *ngIf="searchOpen">
          <span class="condition-name sendTime" >发送时间:</span>
          <nz-datepicker
            [nzSize]="'large'"
            (ngModelChange)="_startDate=$event;_startValueChange()"
            [(ngModel)]="_startDate"
            [nzDisabledDate]="_disabledStartDate" nzShowTime
            [nzFormat]="'YYYY-MM-DD'"
            [nzPlaceHolder]="'起始时间'"></nz-datepicker>
          <nz-datepicker
            [nzSize]="'large'"
            (ngModelChange)="_endDate=$event;_endValueChange()"
            [(ngModel)]="_endDate"
            [nzDisabledDate]="_disabledEndDate" nzShowTime
            [nzFormat]="'YYYY-MM-DD'"
            class="endTime"
            [nzPlaceHolder]="'结束时间'"></nz-datepicker>
        </div>
      </div>

      <div class="product-operate clearfix">
        <div nz-col [nzSm]="24">
          <button nz-button [nzType]="'primary'" [nzSize]="'large'" routerLink="/member/store-product/add">
            <i class="anticon anticon-plus"></i><span>新建通知</span>
          </button>
          <button [disabled]="!_indeterminate && !_allChecked" nz-button class="ml-7" [nzSize]="'large'"
                  (click)="openGrounding('上架')">批量取消
          </button>
          <button [disabled]="!_indeterminate && !_allChecked" nz-button class="ml-7" [nzSize]="'large'"
                  (click)="openGrounding('下架')">批量删除
          </button>
          <p style="float:right;line-height: 32px;">提醒:5分钟以内的不能取消</p>
        </div>
      </div>
      <div class="checked-line" *ngIf="!!checkedIds.length">
        <i class="anticon anticon-info-circle"></i> 已选择 <span>{{checkedIds.length}}</span> 项
        <a href="javascript:;" (click)="checkedIds=[];_indeterminate=false;">清空</a>
      </div>
      <nz-table #nzTable
                [nzCustomNoResult]="true"
                [nzAjaxData]="jobList"
                [nzLoading]="loading"
                [nzTotal]="total"
                [(nzPageIndex)]="page"
                [(nzPageSize)]="pageSize"
                (nzPageIndexChange)="getJobList()">
        <thead nz-thead>
        <tr>
          <th nz-th [nzCheckbox]="true">
            <label nz-checkbox [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate"
                   (ngModelChange)="_checkAll($event)">
            </label>
          </th>
          <th nz-th><span>模板</span></th>
          <th nz-th><span>创建时间</span></th>
          <th nz-th><span>发送时间</span></th>
          <th nz-th><span>状态</span>
            <nz-table-sort (nzValueChange)="sort('created_at',$event)"></nz-table-sort>
          </th>
          <th nz-th><span>发送结果</span>
            <nz-table-sort (nzValueChange)="sort('fee',$event)"></nz-table-sort>
          </th>
          <th nz-th><span>操作</span></th>
        </tr>
        </thead>
        <tbody nz-tbody *ngFor="let data of nzTable.data">
        <tr nz-tbody-tr (click)="data.order_sub_show = !data.order_sub_show">
          <td nz-td [nzCheckbox]="true">
            <label nz-checkbox [(ngModel)]="data.checked" (ngModelChange)="_refreshStatus($event,data.id, data)">
            </label>
          </td>
          <td nz-td>
            <span style="font-family: PingFangSC-Medium;font-size: 14px;color: #000000;">  ID:{{data.wx_template_message.wx_id}}</span>
            <p style="color: #666">{{data.wx_template_message.title}}</p>
          </td>
          <td nz-td>
            {{data.created_at.split(' ')[0]}}
            <br>
            {{data.created_at.split(' ')[1]}}
          </td>
          <ng-container *ngIf="!data['end_time']">
            <td nz-td>

            </td>
          </ng-container>
          <ng-container *ngIf="data['end_time']">
            <td nz-td>
              {{data.end_time.split(' ')[0]}}
              <br>
              {{data.end_time.split(' ')[1]}}
            </td>
          </ng-container>
          <td nz-td>
            <span class="status-circle" [ngClass]="{'bg-green':data['status'] == 4,'bg-red':data['status'] == 2,'bg-yellow':data['status'] == 1 }"></span>
            {{data['status'] == 1 ? '待发送' : '' }}
            {{data['status'] == 2 ? '已失败' : '' }}
            {{data['status'] == 3 ? '已结束' : '' }}
          </td>
          <td nz-td>
            发送: {{ data.reality_sendee_total || 0 }} 人
            <br>
            打开: {{ data.reality_click_total || 0 }} 人
          </td>
          <td nz-td>
            <a href="javascript:;" *ngIf="data['status'] == 1" (click)="showCancelConfirm(data.wx_template_message.id)">取消发送</a>
            <a href="javascript:;" *ngIf="data['status'] == 2" (click)="showAgainConfirm(data.wx_template_message.id)">重新发送</a>
            <!--<a href="javascript:;" *ngIf="data['status'] == 3" (click)="showDeleteConfirm(data.wx_template_message.id)">删除</a>-->
          </td>
        </tr>
        <tr nz-tbody-tr class="order_sub_tr" *ngFor="let item of data.order_sub;let i = index;">
          <td nz-td colspan="2" class="order_sub" *ngIf="!!data.order_sub_show">
            <img src="{{aliyunOssOutputUrl}}/{{turnParse(item.goods_info).first_picture}}" alt="">
            <div>
              <div class="order-sub-title">商品编号: {{item.sku_info.isbn}}</div>
              <div style="width: 210px;">{{turnParse(item.goods_info).name}}</div>
            </div>
          </td>
          <td nz-td *ngIf="!!data.order_sub_show">
            <div class="order-sub-title">数量</div>
            <div>{{item.quantity}}</div>
          </td>
          <td nz-td *ngIf="!!data.order_sub_show">
            <span class="status-circle" *ngIf="item.refund_text"
                  [ngClass]="{'bg-green':item.refund_text==='退款成功','bg-red':item.refund_text==='拒绝退款','bg-yellow':item.refund_text!=='退款成功'&&item.refund_text!=='拒绝退款'}"></span>
            {{item.refund_text}}
          </td>
          <td nz-td *ngIf="!!data.order_sub_show">
            <div *ngFor="let item2 of item.sku_info.sku">{{item2.goods_sku_attribute_name + ':' +
              item2.goods_sku_attribute_value_name}}
            </div>
          </td>
          <td nz-td *ngIf="!!data.order_sub_show">
            <div class="order-sub-title">价格</div>
            <div>￥{{item.fee*item.quantity/1000}}</div>
          </td>
          <td nz-td *ngIf="!!data.order_sub_show">
            <a href="javascript:;" *ngIf="item.refund_text === '申请退款'" (click)="dealRefund(item)">处理退款</a>
            <span>{{item.refund_progress}}</span>
          </td>
        </tr>
        </tbody>
      </nz-table>
      <div noResult *ngIf="nzTable.data && nzTable.data.length === 0" class="empty-wrap" style="margin-top:132px;margin-bottom:100px;">
        <img src="{{ 'assets/images/empty_message_icon.png' }}">
        <p>目前并无任何模版消息</p>
        <p>请新建模版消息</p>
      </div>
    </div>
  </main-content>

</main-layout>

<nz-modal [(nzVisible)]="isDelete" nzTitle="消息" [nzContent]="modalContent" (nzOnCancel)="handleCancel()"
          (nzOnOk)="handleCancel()">
  <ng-template #modalContent>
    <p>确认删除吗?!</p>
  </ng-template>
</nz-modal>
